﻿@{
    ViewData["Title"] = "答题";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@model List<StandXunYouWeb.Model.AnswerQuestions>;

<div class="box-Headr">
    <div class="box-headr-title font_bold">展览巡游 -- 打卡有奖</div>
    <div class="box-headr-title-left font_bold"> < </div>
</div>
<div class="box-content">
    <div class="box-content-headr font_bold">题目</div>

    <div class="box-content-Topic" >

        <form class="layui-form layui-row layui-col-space16" action="" method="post">
            @{
                int count = 0;
                int index = 0;
                var options = new List<string>() { "A", "B", "C", "D" };
            }
            @foreach (var item in Model)
            {
                <div>
                    <div class="layui-col-sm16">
                        <div class="topic_ font_bold" data-topicid="@item.TopicId"><span>@(count + 1).</span>@item.Topic（50积分）</div>
                    </div>
                    
                    <div class="layui-col-sm16 layui_TopicOption">
                        @{
                            string[] strArray = @item.TopicOption.Split(',');
                        }
                        @foreach (var option in strArray)
                        {
                            var Option = "option" + (count + 1);

                            <div class="layui-col-sm3">
                                <input type="radio" name="@Option" value="@options[index % options.Count]" lay-verify="otherReq" title="@option">
                            </div>

                            index++;
                        }
                    </div>
                </div>
                count++;
            }
        
            <div class="layui-form-bottom">
                <div class="layui-col-sm16">
                    <botton type="submit" class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo1">提交</botton>
                </div>
            </div>
        </form>

    </div>
</div>

@section Scripts {
    <script>
        var baseURL = 'https://localhost:44313';
        var userid = $('#uid').val();

        $(".box-bottom").css("visibility","hidden"); //隐藏导航栏
        //初始化layui样式
        layui.use(['form', 'laydate', 'util'], function(){
            var form = layui.form;
            var layer = layui.layer;

            // 自定义验证规则
            form.verify({
                otherReq: function (value, item) {
                    var $ = layui.$;
                    var verifyName = $(item).attr('name'); // 获取单选框的 name 属性
                    var formElem = $(item).parents('.layui-form'); // 获取表单元素
                    var verifyElem = formElem.find("input[name='" + verifyName + "']"); // 获取所有同名的单选框
                    var isChecked = verifyElem.is(':checked'); // 检查是否有被选中

                    if (!isChecked) {
                        return '有选项还未选择！';
                    }
                }
            });

            form.on('submit(demo1)', function(data){

                var submitData = {};
                var topicIds = []; //当前题目的ID
                var optionArr = [];  //题目选项

                for(var key in data.field) {
                    if(key !== '__RequestVerificationToken') {
                        submitData[key] = data.field[key];
                    }
                }
                $('.topic_').each(function(){
                    topicIds.push($(this).data('topicid'));
                })
                optionArr.push(submitData.option1)
                optionArr.push(submitData.option2)

                $.post(baseURL + '/api/AnswerQuestions/CorrectAnswerAsync', { userId: userid, topicId: topicIds, options: optionArr }, function(res){
                    
                    if(res.code == 200){
                        layer.alert('恭喜您答对了'+res.count+'题！获得了 '+res.data+'积分',{
                            title: '提示',
                            btn: ['确认'],
                            btn1: function(){
                                window.location.href = 'https://localhost:44312' //回到首页
                            }
                        });
                    }
                })
                return false; // 阻止表单跳转
            })

            $(document).on('click', '.box-headr-title-left', function(){

                layer.alert('是否取消答题？（结果将不会保存）', {
                    title: '提示',
                    btn: ['确认', '取消'],
                    btn1: function(){
                        window.location.href = 'https://localhost:44312' //回到首页
                    },
                    btn2: function(){ //取消事件
                        
                    }
                });
            })
        })
    </script>
}











